/*
 * @Descripttion: $0
 * @version: 
 * @Author: linPing
 * @Date: 2019-10-31 13:55:25
 * @LastEditTime: 2019-10-31 14:53:09
 */
import React from 'react';
import PropTypes from 'prop-types';

import {
    View,
    StyleSheet,
    Text,
    Modal,
    TouchableOpacity,
    Dimensions
} from 'react-native'
const { width, height } = Dimensions.get('window')

export default class RNActionSheet_CL extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            modalVisible: false,
            // modalVisible:true,
        }
    }

    static propTypes = {
        items: PropTypes.array,
        itemStyle: PropTypes.object,
        actionTitleStyle: PropTypes.object,
        itemTitleStyle: PropTypes.object,
        modalTitle: PropTypes.string,
    }
    static defaultProps = {
        items: [],
        itemStyle: {},
        actionTitleStyle: {},
        itemTitleStyle: {},
        modalTitle: ''
    }



    showModal() {
        this.setState({ modalVisible: true })
    }

    cancelModal() {
        this.setState({ modalVisible: false })
    }

    clickItem(id) {
        this.props.actionsheetItemClick(id);
    }
    componentWillUnmount(){

    }
    render() {
        let actionSheets = this.props.items.map((item, i) => {
            return (
                <TouchableOpacity
                    key={i}
                    style={[styles.actionItem, this.props.itemStyle]}
                    onPress={() => this.clickItem(item.id)}>
                    <Text style={[styles.actionItemTitle, this.props.itemTitleStyle]}
                    >{item.title}</Text>
                </TouchableOpacity>
            )
        })


        return <Modal animationType="fade"  //slide
            visible={this.state.modalVisible}
            transparent={true}
  
            onRequestClose={() => this.setState({ modalVisible: false })}
        >
              <TouchableOpacity style={{flex:1}} onPress={()=>this.cancelModal()}>
            <View style={styles.modalStyle}>
                <View style={styles.subView}>
                    <View style={styles.itemContainer}>
                        <View style={[styles.itemContainer, { height: 55, marginTop: 5 }]}>
                            <Text style={[styles.actionTitle, this.props.actionTitleStyle]}
                            >{this.props.modalTitle}</Text>
                        </View>
                        {actionSheets}
                    </View>

                    {/*取消按钮*/}
                    <View style={[styles.itemContainer]}>
                        <TouchableOpacity
                            style={[styles.actionItem, this.props.itemStyle, { borderTopWidth: 0, height: 50, marginBottom: -5 }]}
                            onPress={() => this.setState({ modalVisible: false })}>
                            <Text style={[styles.actionItemTitle, this.props.itemTitleStyle]}>取消</Text>
                        </TouchableOpacity>
                    </View>

                </View>
            </View>
            </TouchableOpacity>
        </Modal>
    }

}
const styles = StyleSheet.create({
    modalStyle: {
        justifyContent: 'flex-end',
        alignItems: 'center',
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.2)',
 
    },
    subView: {
        justifyContent: 'flex-end',
    
        alignSelf: 'stretch',
        width: width,
        paddingHorizontal:10,

     

    },
    itemContainer: {
    
        marginBottom: 5,
         borderRadius:6,
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center',
    },
    actionItem: {
        width: width,
        height: 50,
        
        alignItems: 'center',
        justifyContent: 'center',
        borderTopColor: '#cccccc',
        borderTopWidth: 0.5,
    },
    actionTitle: {
        fontSize: 14,
        color: '#9EA3AD',
        textAlign: 'center',


    },
    actionItemTitle: {
        fontSize: 18,
        color: '#0066cc',
        textAlign: 'center',
    },
})
